<template>
  <div>
    <label v-for="item in menuData" :key="item.index">
      <el-submenu :index="'/' + item.code" v-if="item.child_menus.length>0">
        <template slot="title">
          <i class="iconfont" :class="item.icon"></i>
          <span>{{ item.name }}</span>
        </template>
        <Nav :menuData="item.child_menus" />
      </el-submenu>
      <el-menu-item :index="'/' + item.code" v-else >
        <template slot="title">
          <i class="iconfont" :class="item.icon"></i>
          <span>{{ item.name }}</span>
        </template>
      </el-menu-item>
      
      
    </label>
  </div>
</template>

<script>
import Nav from "@/components/Nav.vue";
export default {
  name: "Nav",
  components: { Nav },
  props: {
    menuData: {
      type: Array
    }
  },
  data() {
    return {};
  }
};
</script>


<style>
.el-aside {
  background-color: #181c27;
  color: #656876;
  line-height: 200px;
}
.aside .el-menu-item.is-active,
.aside .el-menu-item:hover,
.aside .el-submenu__title:hover {
  position: relative;
  background: linear-gradient(90deg, #123166 0%, #112e5f 100%) !important;
}
.aside .el-menu-item.is-active::before,
.aside .el-menu-item.is-active:hover::before,
.aside .el-menu-item:hover::before,
.aside .el-submenu__title:hover::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: #2878ff;
  width: 5px;
}
</style>
